<!--
    group: 系统设置
    name: 未填写实名手机号企业列表
    Author: mwl
    url: /setting/entMobileNumberList
-->
<template>
  <div class="main_content">
    <div class="header_invioce">
      <h3>未填写实名手机号企业列表</h3>
    </div>
    <a-table bordered
       rowKey="id"
       size='small'
     :loading="loading"
     :pagination="false"
     :columns="columnsRecord"
     :dataSource="tableData"
    >
      <a-form-model
        slot="phone"
        slot-scope="text,record"
        :ref="record.id"
        :model="record"
        :rules="rules"
      >
        <a-form-model-item prop="phone">
          <a-input style="width:100%" v-model="record.phone">
            <a-icon slot="prefix" type="mobile" />
            <a-tooltip slot="suffix" title="手机号未实名">
              <a-icon type="info-circle" style="color: red" />
            </a-tooltip>
          </a-input>
        </a-form-model-item>
      </a-form-model>
      <span slot="action" slot-scope="text,record">
          <a-button type='link' @click='submitOk(record.id,record.phone)'>提交</a-button>
      </span>
    </a-table>
    <a-pagination
      v-model="page.currentPage"
      :page-size-options="['5', '10', '20']"
      :show-total="total => `共 ${total} 条`"
      :total="page.totalCount"
      show-size-changer
      :page-size="page.pageSize"
      @showSizeChange="onSizeChange"
      @change="onPageChange"
    >
    </a-pagination>

  </div>
</template>

<script>
import { getLegalList, getUpdateLegalPhone } from '@api/setting'
export default {
  name: 'entMobileNumberList',
  data() {
    let validatePhone = (rule, value, callback) => {
      // console.log(rule,value,callback)
      let reg = /^(1\d{10})$/
      if (value === '') {
        callback(new Error('请输入手机号'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    return {
      loading: true,
      tableData:[],
      columnsRecord:[
        {
          title: '企业名称',
          align: 'center',
          width: 180,
          dataIndex: 'entName',
        },
        {
          title: '法人名称',
          align: 'center',
          width: 120,
          dataIndex: 'legalName',
        },
        {
          title: '法人身份证号',
          dataIndex: 'certNo',
          align: 'center',
          width: 180,
        },
        {
          title: '法人实名手机号',
          dataIndex: 'phone',
          align: 'center',
          width: 130,
          scopedSlots: {customRender: 'phone'},
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: {customRender: 'action'},
          align: 'center',
          width: 80,
        }
      ],
      //表格分页
      page: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        totalPage: 0, // 总页数
        totalCount: 0, // 总条数
        params: {}, // 查询参数对象
        list: [], // 数据
      },
      rules: {
        phone: [{ validator: validatePhone, trigger: 'change' }]
      },
    }
  },
  mounted() {
    this.getTableData()
  },
  methods:{
    //初始化数据
    getTableData(){
      this.loading = true;
      let params={};
      // params.data={};
      params.pageNo = this.page.currentPage;
      params.pageSize = this.page.pageSize;
      getLegalList(params).then(res => {
        if (res.success){
          const data = res.result || {};
          // 赋值表格数据
          this.tableData = data.records || [];
          // 赋值总条数
          this.page.totalCount = data.total || 0;
          this.loading = false;
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //选择页数
    onPageChange(newPage) {
      this.page.currentPage = newPage;
      this.getTableData()
    },
    // 页面变化
    onSizeChange(current, newSize) {
      this.page.pageSize = newSize;
      this.getTableData()
    },
    //提交
    submitOk(id,phone){
      this.$refs[id].validate((valid) => {
        if (valid) {
          let params={};
          params.id = id;
          params.phone = phone;
          getUpdateLegalPhone(params).then(res => {
            if (res.success){
              if (res.result){
                this.$message.success('法人实名手机号认证成功！');
                this.page.currentPage = 1;
                this.page.pageSize = 10;
                this.getTableData();
              }else{
                this.$message.warning('验证不一致,手机号已实名，但是身份证和姓名均与实名信息不一致');
              }
            }else{
              this.$message.warning(res.message);
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.main_content{
  color: @color-smudge;
}
h3,h4{
  font-weight: bolder;
}
h3{
  font-size: 20px;
}

.header_invioce{
  width: 100%;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

</style>
